<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../../public/css/general.css">
    <link rel="stylesheet" href="../../../../public/css/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../../../../public/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../../public/css/wechat/cart.css">
    <title>白蔬贞</title>
</head>
<body>
<div id="cart">
    <div class="mask" v-if="isShowMask">
        <div class="change-num">
            <div class="top">输入数量</div>
            <div class="middle">
                <img @click="reduce()" src="../../../../public/images/reduce.png" alt="减">
                <input v-focus type="tel" v-model.number="num">
                <img @click="plus()" src="../../../../public/images/plus.png" alt="加">
            </div>
            <div class="bottom">
                <div @click="cancel()" class="cancel">取消</div>
                <div @click="confirm()" class="confirm button-jb-g">确定</div>
            </div>
        </div>
    </div>
    <div class="top-bar">
        <a href="javascript:;" @click="goBack()" v-if="cartProducts.length>0 && control=='编辑'">
            <i class="iconfont">&#xe665;</i>
        </a>
        <img src="../../../../public/images/location.png" alt="location">
        <span v-text="tip">门店名称</span>
        <div v-if="cartProducts.length>0" @click="toChangeControl()" v-text="control" class="control" :class="{'control-r': control!='编辑'}">编辑</div>
    </div>
    <!--<div class="placeholder"></div>-->
    <!--购物车有数据-->
    <div id="cart-products" class="cart-products" v-if="cartProducts.length>0">
        <div class="cell" v-if="control=='编辑'">
            <div class="card" v-for="p in cartProducts" >
                <div class="icon">
                    <img :src="p.img" alt="">
                </div>
                <div class="content">
                    <div class="top bzs-multi-text-ellipsis" v-text="p.name"></div>
                    <div class="middle" v-text="p.norm"></div>
                    <div class="bottom">
                        <div class="title" v-text="'¥'+p.unitPrice+'/'+p.unit"></div>
                        <div class="right" v-text="'共计'+p.num+p.unit+'，小计¥'+(p.unitPrice*p.num)"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <!--编辑界面-->
        <div class="cell" v-if="control!='编辑'">
            <div class="card-edit" v-for="p in cartProducts" >
                <div class="radio" @click="selectProduct(p)">
                    <img v-if="!p.isSelected" src="../../../../public/images/radio-unselected.png" alt="单选按钮">
                    <img v-if="p.isSelected" src="../../../../public/images/radio-selected.png" alt="单选按钮">
                </div>
                <div class="card">
                    <div class="icon">
                        <img :src="p.img" alt="">
                    </div>
                    <div class="content">
                        <div class="top" v-text="p.name"></div>
                        <div class="middle" v-text="p.norm"></div>
                        <div class="bottom">
                            <div class="title" v-text="'¥'+p.unitPrice+'/'+p.unit"></div>
                            <div class="right">
                                <img @click="cartReduce(p)" v-if="p.showControl && p.num>0" src="../../../../public/images/reduce.png" alt="减">
                                <span v-if="p.showControl && p.num>0" @click="changeMask(p)" class="num" v-text="p.num"></span>
                                <span class="product-control" @touchstart.prevent="touchPlus(p)" @touchend.prevent="clickPlus(p)">
                                    <img v-if="p.click" src="../../../../public/images/plus2.png" alt="加">
                                    <img v-if="!p.click" src="../../../../public/images/plus.png" alt="加">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <span class="total">
                <img @click="selectAll()" v-if="control!='编辑' && !isAll" src="../../../../public/images/radio-unselected.png" alt="">
                <img @click="selectAll()" v-if="control!='编辑' && isAll" src="../../../../public/images/radio-selected.png" alt="">
                合计：<span class="money" v-text="'¥'+cartTotal">¥288</span>
            </span>
            <div @click="submitOrder()" class="button button-jb-g" v-if="control=='编辑'">提交订单</div>
            <div @click="deleteSelected()" class="button button-del" v-if="control!='编辑'">删除</div>
        </div>
    </div>
    <div class="content" v-if="cartProducts.length<=0">
        <!--购物车无数据-->
        <div class="empty">
            <img class="img-empty" src="../../../../public/images/cart-empty.png" alt="空购物车">
            <p>购物车空空如也~</p>
            <img @click="toShopping()" src="../../../../public/images/go-shopping.png" alt=去购物" class="button">
            <img @click="toOftenBuyPage()" src="../../../../public/images/go-shopping-order.png" alt="去购物清单" class="button">
        </div>
        <!--为你推荐-->
        <div id="recommend">
            <div class="title">
                <div class="line"></div>
                <div class="circle"></div>
                <div class="tip">为你推荐</div>
                <div class="circle"></div>
                <div class="line"></div>
            </div>
            <div class="middle">
                <div class="product" v-for="r in recommends">
                    <div class="card">
                        <img :src="r.img" alt="图片">
                        <p v-text="r.name"></p>
                        <span>
                        <span v-text="r.basePrice+'/'+r.unit"></span>
                        <span class="icon-cart" @touchstart.stop="touchProductToCart(r, $event)" @touchend.prevent.stop="addProductToCart(r)">
                            <img class="no-touch" v-if="recommend.id!=r.id" src="../../../../public/images/cart-unselected1.png" alt="">
                            <img class="has-touch" v-if="recommend.id==r.id" src="../../../../public/images/cart-selected1.png" alt="">
                        </span>
                            <!--<img src="../../../../public/images/cart-unselected1.png" alt="">-->
                    </span>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="footer">
                <div class="line"></div>
                <div class="circle"></div>
                <div class="tip">白蔬贞是有底线的！</div>
                <div class="circle"></div>
                <div class="line"></div>
            </div>
        </div>
    </div>

    <!--底部导航-->
    <mt-tabbar v-model="selected">
        <mt-tab-item id="home">
            <img slot="icon" src="../../../../public/images/home-unselected.png">
            首页
        </mt-tab-item>
        <mt-tab-item id="all">
            <img slot="icon" src="../../../../public/images/all-unselected.png">
            全部
        </mt-tab-item>
        <mt-tab-item id="cart">
            <img slot="icon" src="../../../../public/images/cart-selected.png">
            购物车
        </mt-tab-item>
        <mt-tab-item id="mine">
            <img slot="icon" src="../../../../public/images/mine-unselected.png">
            我的
        </mt-tab-item>
    </mt-tabbar>
</div>
<script src="../../../../public/js/vue.js"></script>
<script src="../../../../public/css/mint-ui/lib/index.js"></script>
<script src="../../../../public/js/jquery.min.js"></script>
<script src="../../../../public/js/store.js"></script>
<script src="../../../../public/js/wechat/mixin.js"></script>
<script src="../../../../public/js/wechat/cart/index.js"></script>
</body>
</html>